<template>
  <editor id="tinymce" v-model="tinymceHtml" :init="init"></editor>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/plugins/image'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/link'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/anchor'
// import 'tinymce/plugins/media'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
export default {
  name: 'tinymce',
  props: {
    cont: {
      default: ''
    }
  },
  data () {
    return {
      tinymceHtml: '请输入内容',
      init: {
        skin_url: '/tinymce/skins/ui/oxide',
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        height: 300,
        statusbar: false,
        menubar: false,
        plugins: [
          'advlist link image',
          'code',
          'insertdatetime table textcolor contextmenu paste imagetools wordcount anchor'
        ],
        toolbar_items_size: 'small',
        block_formats: 'Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;',
        toolbar1: 'table | insertfile undo redo | formatselect | uploadimg image | link unlink | fontsizeselect | forecolor backcolor | anchor', // 工具栏1
        toolbar2: 'fontselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | removeformat', // 工具栏2, mybutton是自己加的自定义按钮
        images_upload_url: 'postAcceptor.php'
      }
    }
  },
  watch: {
    'tinymceHtml': function (newVal) {
      this.$emit('editCont', newVal)
    },
    'cont': function () {
      if(this.cont) this.tinymceHtml = this.cont
    }
  },

  mounted () {
    this.tinymceHtml = this.cont ? this.cont : this.tinymceHtml
    tinymce.init({})
  },
  components: { Editor }
}
</script>